{% extends 'base.html' %}
{% block title %}小涛博客 - 时间轴{% endblock %}
{% block nav_time_active %}active{% endblock %}

{% load staticfiles %}
{% load comment_tags %}
{% load likes_tags %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="align-center align-middle" id="masthead" style="height: 426px;">
        <div class="blog-background" style="background-image: url('{% static 'images/timer-bg.jpg' %}');"></div>
        <div class="inner"></div>
    </div>
    <div class="orther_body">
        <div class="container">
            <div class="row t_nav">
                <div class="col-md-4">
                    <a href="{% url 'home' %}" class="n1">网站首页</a>
                    <a href="{% url 'timer_list' %}" class="n2">时间轴</a>
                </div>
                <div class="col-md-8">
                    <span class="pull-right">时光飞逝，机会就在我们眼前，学会把握机遇。</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10">
                    <!-- content start -->
                    <div class="blogsbox">
                        {% for blog in blogs %}
                         <article>
                            <a href="{% url 'blog_detail' blog.pk %}">
                                <div class="post-card" id="post-card-{{ blog.pk }}">
                                    <div class="blog-background" style="background-image: url('/uploads/{{ blog.picture }}')"></div>
                                    <div class="lazyload-container"></div>
                                    <img src="" style="display: none" onload="javascript:loadBanner(this, '/uploads/{{ blog.picture }}', '', document.querySelector('#post-card-{{ blog.pk }}'), '-1', document.querySelector('#post-card-1952').offsetWidth, document.querySelector('#post-card-{{ blog.pk }}').offsetHeight)">

                                    <div class="post-card-mask">
                                        <div class="post-card-container">
                                            <h2 class="post-card-title" itemprop="headline"><span style="color:red"></span>{{ blog.title }}</h2>
                                            <div class="post-card-info">
                                                                <span itemprop="author" itemscope="">时间：{{ blog.created_time|date:"Y-m-d" }}</span>
                                                <span class="label"><span class="biao">标签：{{ blog.blog_tag }}</span></span>
                                                <span class="label">阅读：{{ blog.get_read_num }} </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </article>
                        {% empty %}
                            <div class="blog">
                                <h3>暂无文章，敬请期待</h3>
                            </div>
                        {% endfor %}
                    </div>
                    <!-- content end -->
                </div>
                <div class="col-md-1"></div>
            </div>
            <!-- paginator start -->
            <div class="paginator">
                <ul class="pagination">
                    {% for page_num in page_range %}
                        {% if page_num == page_of_blogs.number %}
                            <li class="active"><span>{{ page_num }}</span></li>
                        {% else %}
                            {% if page_num == '...' %}
                                <li><span>{{ page_num }}</span></li>
                            {% else %}
                                <li><a href="?page={{ page_num }}">{{ page_num }}</a></li>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </ul>
                <p>
                    共有{{ page_of_blogs.paginator.count }}篇文章，
                    当前第{{ page_of_blogs.number }}页，共{{ page_of_blogs.paginator.num_pages }}页
                </p>
            </div>
        </div>
    </div>
{% endblock %}
